<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<style>
    /* 导航链接样式 */
    nav a {
        color: #333;
        text-decoration: none;
        padding: 10px;
        margin-right: 10px;
    }

    /* 鼠标悬停样式 */
    nav a:hover {
        background-color: #ccc;
        color: #fff;
    }

    /* 选中状态样式 */
    nav a.active {
        background-color: #f00;
        color: #fff;
    }

</style>
<div id="top">
    <nav style="text-align: right;background-color: #8c8c8c;color: white">
        欢迎入驻拼多多商城&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="index.html">买家模式</a>
        <a href="user?method=logout" id="logout">注销</a>
        <a href="shopInfo.html">店铺信息</a>
        <a href="myGoodsList.html">我的商品</a>
        <!--    <a href="#">发布商品</a>-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">发布商品</button>
        <a href="purchaseDetail.html">查看购买订单</a>
        <a href="#">修改产品信息</a>
        <a href="refundInfo.html">查看退款申请</a>
        <a href="#">客服</a>
    </nav>
    <!-- 弹窗内容 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">添加新商品</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 商品表单 -->
                    <form id="productForm">
                        <div class="form-group">
                            <label for="inputName">商品名称</label>
                            <input type="text" class="form-control" id="inputName" name="productName"
                                   placeholder="请输入名称">
                        </div>
                        <div class="form-group">
                            <label for="inputPrice">商品价格</label>
                            <input type="text" class="form-control" id="inputPrice" name="productPrice"
                                   placeholder="请输入价格">
                        </div>
                        <div class="form-group">
                            <label for="inputPrice">商品库存</label>
                            <input type="text" class="form-control" id="inputStock" name="productStock"
                                   placeholder="请输入库存">
                        </div>
                        <div class="form-group">
                            <label for="inputPrice">商品介绍</label>
                            <input type="text" class="form-control" id="inputInfo" name="productInfo"
                                   placeholder="请输入商品介绍">
                        </div>
                        <div class="form-group">
                            <label for="categorySelect">商品类型</label>
                            <select class="form-control" id="categorySelect" name="productType"></select>
                        </div>
                        <div class="form-group">
                            <label for="fileInput">商品图片</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="fileInput" name="productFile">
                                <label class="custom-file-label" for="fileInput">选择文件</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="button" id="save" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-3.6.4.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        // 获取商品类型列表
        $.ajax({
            url: "/PDD/type?method=findAllType",
            dataType: "json",
            success: function (result) {
                let data=result.data
                // 填充下拉框选项
                var options = '';
                for (var i = 0; i < data.length; i++) {
                    options += '<option value="' + data[i].tId + '">' + data[i].tName + '</option>';
                }
                $('#categorySelect').html(options);
            }
        })
        // 监听保存点击事件
        $("#save").click(function () {
            alert($("#inputName").val())
            $.ajax({
                type: "post",
                url: "/PDD/product?method=addProduct",
                dataType: "json",
                data: {
                    "name": $("#inputName").val(),
                    "price": $("#inputPrice").val(),
                    "stock": $("#inputStock").val(),
                    "info": $("#inputInfo").val(),
                    "type": $("#categorySelect").val(),
                    "file": $("#fileInput").val(),
                },
                success: function (response) {
                    alert("添加成功");
                    $("#exampleModal").modal("hide");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (textStatus === "timeout") {
                        alert("请求超时");
                    } else if (textStatus === "error") {
                        alert("请求失败：" + errorThrown);
                    } else {
                        alert("未知错误：" + errorThrown);
                    }
                }
            });
        });

    });
</script>
</html>